<template>
	<div>
		<div ref="chartRef" class="w-full h-full"></div>
	</div>
</template>

<script setup lang="ts">
import { tryOnUnmounted, useDebounceFn } from '@vueuse/core';
import * as echarts from 'echarts';
import { useEventListener } from '/@/hooks/event/useEventListener';
const chartRef = ref();
let resizeFnPollute = resize;
let removeResizeFn = () => {};
let instance: any;
resizeFnPollute = useDebounceFn(resize, 200);
const setOptions = () => {
	instance = echarts.init(chartRef.value);
	const option = {
		color: '#1cf3d6',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		grid: {
			left: 4,
			right: 10,
			bottom: 0,
			top: 0,
			containLabel: true,
		},
		xAxis: {
			type: 'value',
			data: [0, 30],
			axisLine: {
				show: true,
			},
			axisLabel: { color: '#fff', fontSize: 10 },
		},
		yAxis: {
			type: 'category',
			data: ['质控点02', '质控点01', '研究院03', '研究院02', '研究院01', '研究院04'],
			axisLabel: { color: '#fff', fontSize: 10 },
		},
		series: [
			{
				type: 'bar',
				data: [6, 21, 56, 102, 118, 157],
				label: {
					show: true,
					position: 'right',
					color: '#1cf3d6',
				},
			},
		],
	};
	instance.setOption(option);
	const { removeEvent } = useEventListener({
		el: window,
		name: 'resize',
		listener: resizeFnPollute,
	});
	removeResizeFn = removeEvent;
};
function resize() {
	const config = {
		animation: {
			duration: 300,
			easing: 'quadraticIn',
		},
	};
	instance.resize(config);
}
onMounted(() => {
	setOptions();
});

tryOnUnmounted(() => {
	removeResizeFn();
});
</script>

<style lang="scss" scoped></style>
